<template>
  <div ref="printer" class="printer"></div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
// 挂载的dom元素
let printer = ref<HTMLElement | null>(null);

// 存放展示文字的字段
const str = ref(`
  1、Don't worry when you are not recognized, but strive to be worthy of recognition. 如果不被别人认可，不要担心，要努力让自己值得被认可。
  2、When you have exhausted all possibilities, remember this: you haven't. 当你已穷尽所有可能性时，要记住：还是有可能。
  3、Keep your face always toward the sunshine—and shadows will fall behind you. 总是面向阳光,阴影就会被甩在身后。
  4、The power of imagination makes us infinite. 想象力让我们突破极限。
  5、The world is full of magical things patiently waiting for our wits to grow sharper. 世界充满了神奇的东西，它们在耐心地等待我们变得更有智慧。
  6、The glow of one warm thought is to me worth more than money. 温暖的想法散发出的光辉,对我的价值胜过金钱。
  7、Once we believe in ourselves， we can risk curiosity， wonder， spontaneous delight， or any experience that reveals the human spirit. 相信自己，我们就能够有勇气去践行我们的好奇，想法，油然而生的喜悦，或是那些展现人类精神的体验。
  8、Let us make our future now, and let us make our dreams tomorrow's reality. 即刻起，为未来奋斗，要让今天的梦想成为明天的现实。
  9、All you need is the plan, the road map, and the courage to press on to your destination. 你只需要订好计划，准备好地图，鼓起向目标前进的勇气。
  10、No man or woman is worth your tears, and the one who is, won’t make you cry. 没有人值得你流泪，值得让你这么做的人不会让你哭泣。
  11、Try to be a rainbow in someone’s cloud. 试着成为别人天空里的那道彩虹吧。
  12、I believe that if one always looked at the skies, one would end up with wings. 我坚信,总是仰望天空的人,最终一定会展翅高飞。
  13、Darkness cannot Drive out darkness,only light can do that. Hate cannot drive out hate,Only love can do that. 黑暗不能驱逐黑暗，只有光明可以做到。 仇恨不可以驱逐仇恨，只有爱可以做到。
  14、When the sun is shining I can do anything; no mountain is too high, no trouble too difficult to overcome. 只要阳光普照，一切我都可以做到；没有翻不过的高山，没有战胜不了的困难。
  15、Happiness is not something you postpone for the future; it is something you design for the present.幸福不应该等到未来去拥有，而是为了当下所准备。
  不要问这世间，还有几多的真心，在穷途末路的时候，就和自己的影子相依为命。
  我佩服那些可以隐忍的人，将自己的苦痛掩映得那么深，只取快乐与别人分享，其实内心悲伤早已泛滥成灾，却看上去若无其事，岁月安好。
  真正的平静，不是避开车马喧嚣，而是在心中修篱种菊。尽管如流往事，每一天都涛声依旧，只要我们消除执念，便可寂静安然。愿每个人，在纷呈世相中不会迷失荒径，可以端坐磐石上，醉倒落花前。
  ,
  ,
  ,
  不太优秀的自己，努努力，也可以去争做别人的太阳.
  If you are not so good, you can strive to be the sun of others if you work hard.
  あなたがあまり良くないなら，あなたが一生懸命働くならば，あなたは他人の太陽になるように努力することができます。
  자신이 그렇게 좋지 못하더라도 열심히 노력하면 다른 사람의 태양이 되기 위해 노력할 수 있습니다.
`)

// 存放切割的字符集合
const filterRole = reactive([',','?','。','.', '!','，','；'])

// 存放切割后的字符串集合
let arrStr = reactive([] as string[]);

// 存放生成的每一条数据
let strLittle = ref('' as string);

// 清除定时器开关
let timer = ref(0 as any);

// 当前文字检索索引
let i = ref(0);

// 当前检测的文字符集合索引
let index = ref(0);

// 对字符传进行切割
const filterStr = (str:string) => {
  let one = str.substring(0,1);
  strLittle.value += one;
  if(filterRole.includes(one)){ 
    arrStr.push(strLittle.value)
    strLittle.value = "";
  }
  if(str){ filterStr(str.slice(1)) }
}

// 进行元素插入
const typing = () => {
  printer.value ? (printer.value as HTMLElement ).scrollTop = (printer.value as HTMLElement ).scrollHeight : '';
  let str = arrStr[index.value] || '';
  if(i.value == 0){
    let div = document.createElement('div');
    div.setAttribute('id', `fzz${index.value}`);
    div.setAttribute('style', `color: #ccc;font-family: cursive;font-family: 'Courier New', Courier, monospace;`);
    (printer.value as HTMLElement ).appendChild(div);

  }
  let divTyping = document.getElementById(`fzz${index.value}`)
  if(i.value < str.length) {
    (divTyping as HTMLElement).innerHTML = str.slice(0, i.value++) + '|';
    timer.value = setTimeout(typing, 10)
  } else {
    //结束打字,移除 _ 光标
    (divTyping as HTMLElement).innerHTML = str;
    clearTimeout(timer.value);
    i.value = 0;
    index.value++;
    if(index.value < arrStr.length){
      timer.value = setTimeout(typing, 20)
    }else{
      clearTimeout(timer.value)
    }
  }
}

onMounted(()=>{
  filterStr(str.value);
  typing();
})
</script>
